<template>
  <div class="indexBox">
    <myNav types="3" :develName="develName" name="开发商" @childEvent="childEvent"></myNav>
    <div class="home">
      <div class="cityList">
        <div class="cityListBox">{{ selectCityName }}<img src="@/assets/img/bjBuilding/citydown.png" alt=""
            @click="cityUns" /></div>
        <ul class="cityData" v-if="cityUn">
          <li class="cityLi" @click="confirmCity(null, '全部城市')">全部城市</li>
          <li v-for="(item, index) in cityList" :key="index" class="cityLi"
            @click="confirmCity(item.regionCode, item.regionName)">
            {{ item.regionName }}
          </li>
        </ul>
      </div>
      <div class="wall message flex wrap">
        <div class="message-list">
          <img src="@/assets/img/bjBuilding/zero.png" class="detailImgWH" alt="" />
          <div class="pBot">
            <div class="ymoney">
              <img src="@/assets/img/bjBuilding/bjlxmzs.png" alt="" />
            </div>
            <div class="money1">{{ bjlxmzs }}</div>
          </div>
        </div>
        <div class="message-list">
          <img src="@/assets/img/bjBuilding/zero1.png" alt="" class="detailImgWH" />
          <div class="pBot">
            <div class="ymoney">
              <img src="@/assets/img/bjBuilding/lazcxms.png" alt="" />
            </div>
            <div class="money1">{{ lazcxms }}</div>
          </div>
        </div>
        <div class="message-list">
          <img src="@/assets/img/bjBuilding/zero.png" alt="" class="detailImgWH" />
          <div class="pBot">
            <div class="ymoney">
              <img src="@/assets/img/bjBuilding/wqbaxms.png" alt="" />
            </div>
            <div class="money1">{{ wqbaxms }}</div>
          </div>
        </div>
        <div class="message-list">
          <img src="@/assets/img/bjBuilding/zero1.png" alt="" class="detailImgWH" />
          <div class="pBot">
            <div class="ymoney ymoneys">
              <img src="@/assets/img/bjBuilding/bjlts.png" alt="" />
            </div>
            <div class="money1">{{ bjlts }}</div>
          </div>
        </div>
        <div class="message-list">
          <img src="@/assets/img/bjBuilding/zero.png" alt="" class="detailImgWH" />
          <div class="pBot">
            <div class="ymoney ymoneyss">
              <img src="@/assets/img/bjBuilding/jfts.png" alt="" />
            </div>
            <div class="money1">{{ jfts }}</div>
          </div>
        </div>
        <div class="message-list">
          <img src="@/assets/img/bjBuilding/zero1.png" alt="" class="detailImgWH" />
          <div class="pBot">
            <div class="ymoney ymoneys">
              <img src="@/assets/img/bjBuilding/zcsgl.png" alt="" />
            </div>
            <div class="money1">{{ zcsgl }}</div>
          </div>
        </div>
        <div class="message-list">
          <img src="@/assets/img/bjBuilding/zero.png" alt="" class="detailImgWH" />
          <div class="pBot">
            <div class="ymoney">
              <img src="@/assets/img/bjBuilding/jkzje.png" alt="" />
            </div>
            <div class="money1">{{ jkzje }}</div>
          </div>
        </div>
        <div class="message-list">
          <img src="@/assets/img/bjBuilding/zero1.png" alt="" class="detailImgWH" />
          <div class="pBot">
            <div class="ymoney">
              <img src="@/assets/img/bjBuilding/hkje.png" alt="" />
            </div>
            <div class="money1">{{ hkzje }}</div>
          </div>
        </div>
      </div>
      <div class="left two">
        <div>
          <contentTitle :myIndex="6"></contentTitle>
          <div class="myProgress module-bg">
            <useEcharts :echartsOption="echartsOption1" @childEvent="useSelectProjectResidueSchedule" @dialogData="dialogData"
              v-if="echartsOption1"></useEcharts>
          </div>
        </div>
        <div>
          <contentTitle :myIndex="7"></contentTitle>
          <div class="myProgress module-bg">
            <myProgress :parms="parms" :pageSize="5" :pageNumber="1"></myProgress>
            <el-row class="kfssyzzb">
              <el-col :span="12" class="echartsHeight">
                <useEcharts :echartsOption="xmsjtjqkOption" @childEvent="useSelectProjectAuditStatistics" @dialogData="dialogData"
                  v-if="xmsjtjqkOption"></useEcharts>
              </el-col>
              <el-col :span="12" class="flex ac">
                <div class="hd">
                  <div class="list">
                    <div class="zzbOne"></div>
                    <div class="zzbTwo">项目数</div>
                    <div class="zzbThree">占比</div>
                  </div>
                  <div class="list" v-for="(item, index) in tableArr" :key="index">
                    <div class="zzbOne"><span class="spanRadius"></span> {{ item.auditStatusName }}</div>
                    <div class="zzbTwo">{{ item.projectNumber }}</div>
                    <div class="zzbThree">{{ item.proportion }}%</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div>
          <div>
            <contentTitle :myIndex="8"></contentTitle>
          </div>
          <div class="time">
            <div :span="24" class="flex jend">
              <div :class="BaseDeliverLineParams.dateTypee == '1' ? 'times' : 'unTimes'" @click="timesJf('1')">近3月</div>
              <div :class="BaseDeliverLineParams.dateTypee == '2' ? 'times' : 'unTimes'" @click="timesJf('2')">近半年</div>
              <div :class="BaseDeliverLineParams.dateTypee == '3' ? 'times' : 'unTimes'" @click="timesJf('3')">近1年</div>
              <div :class="BaseDeliverLineParams.dateTypee == '4' ? 'times' : 'unTimes'" @click="timesJf('4')"
                class="relative">
                <div class="absolute zdy">自定义</div>
                <el-date-picker v-model="timeValue1" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" @change="optTime1" format="YYYY-MM-DD" value-format="YYYY-MM-DD">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="myProgress1 module-bg">
            <useEcharts :echartsOption="jfpmOption" @childEvent="useGetBaseDeliverLine" v-if="jfpmOption" @dialogData="dialogData" ></useEcharts>
          </div>
        </div>
        <div>
          <div>
            <contentTitle :myIndex="9"></contentTitle>
          </div>
          <div class="time">
            <div :span="24" class="flex jend">
              <div :class="BaseDeliverLineParams.dateTypef == '1' ? 'times' : 'unTimes'" @click="timesjk('1')">近3月</div>
              <div :class="BaseDeliverLineParams.dateTypef == '2' ? 'times' : 'unTimes'" @click="timesjk('2')">近半年</div>
              <div :class="BaseDeliverLineParams.dateTypef == '3' ? 'times' : 'unTimes'" @click="timesjk('3')">近1年</div>
              <div :class="BaseDeliverLineParams.dateTypef == '4' ? 'times' : 'unTimes'" @click="timesjk('4')"
                class="relative">
                <div class="absolute zdy">自定义</div>
                <el-date-picker v-model="timeValue" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" @change="optTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="myProgress1 module-bg">
            <useEcharts :echartsOption="jkpmOption" @childEvent="useGetBaseLendLine" v-if="jkpmOption" @dialogData="dialogData" ></useEcharts>
          </div>
        </div>
      </div>
      <div class="right">
        <contentTitle :myIndex="10"></contentTitle>
        <div class="module-bg">
          <bigProgress :parms="BaseDeliverLineParams"></bigProgress>
        </div>
      </div>
    </div>
    <magnify
    v-if="magnifyEchartData"
    :housingSupplyStatsData="magnifyEchartData"
    @closeDialog="closeDialog"
  ></magnify>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import {
  selectEnterpriseInfoProjectInfo,
  selectProjectResidueSchedule,
  selectProjectAuditStatistics,
  getBaseDeliverLine,
  getBaseLendLine,
  selectProjectMoneyTree,
  getBaseDeliver,
  selectPull,
} from "@/api/bjBuilding";
import contentTitle from "@/components/bjBuilding/contentTitle/index.vue";
import { echartsData1, xmsjtjqk, kfsjfpm, kfsjkpm } from "@/utils/echartsData";
import useEcharts from "@/components/bjBuilding/useEcharts/index.vue";
import bigProgress from "@/components/bjBuilding/bigProgress/index.vue";
import myNav from "@/components/bjBuilding/header/index.vue";
import magnify from "@/components/public/magnify.vue";

const magnifyEchartData = ref(null)
const echartsOption1 = ref(null);
const tableArr = ref(null);
const xmsjtjqkOption = ref(null);
const jfpmOption = ref(null);
const jkpmOption = ref(null);
let timeValue = ref(null);
let timeValue1 = ref(null);
let wqbaxms;
let bjlxmzs;
let lazcxms;
let jkzje;
let hkzje;
let bjlts;
let jfts;
let zcsgl;
let selectCityName = ref("全部城市");
let { proxy } = getCurrentInstance();
let develName = proxy.$route.params.groupName;
let cityUn = ref(false);
const cityList = ref(null);
const BaseDeliverLineParams = reactive({
  cityName: null,
  dateTypee: "1", //ee 交付
  dateTypef: "1", //ef 借款
  startTimee: "2023-01-01",
  endTimee: "2023-08-30",
  startTimef: "2023-01-01",
  endTimef: "2023-08-30",
  groupName: proxy.$route.params.groupName,
  queryType: "1",
  queryStr: null,
  pageSize: 15,
  pageNumber: 1,
  cityCode: "",
});
// 获取保交楼套数，交付套数，正常施工率
const useGetBaseDeliver = async () => {
  await getBaseDeliver(BaseDeliverLineParams).then((res) => {
    if (res.code == 0) {
      bjlts = res.data.deliverNum;
      jfts = res.data.deliverRate;
      zcsgl = res.data.proNum;
    }
  });
};

//开发商详情项目数量
const useSelectEnterpriseInfoProjectInfo = async () => {
  await selectEnterpriseInfoProjectInfo(BaseDeliverLineParams).then((res) => {
    if (res.code == 0) {
      wqbaxms = res.data.archivalProjectNumber;
      bjlxmzs = res.data.projectNumber;
      lazcxms = res.data.scoutProjectNumber;
    }
  });
};
//借款还款总金额
const useSelectProjectMoneyTree = async () => {
  await selectProjectMoneyTree(BaseDeliverLineParams).then((res) => {
    if (res.code == 0) {
      jkzje = res.data.borrowMoney;
      hkzje = res.data.returnMoney;
    }
  });
};
let selectProjectResidueScheduleEcharts;
//项目剩余保交楼完成进度
const useSelectProjectResidueSchedule = async (type) => {
  if (type == 1) {
    await selectProjectResidueSchedule(BaseDeliverLineParams).then((res) => {
      if (res.code == 0) {
        echartsOption1.value = echartsData1(res.data);
        selectProjectResidueScheduleEcharts = res.data;
      }
    });
  } else {
    echartsOption1.value = echartsData1(selectProjectResidueScheduleEcharts);
  }
};
//开发商所有只占比
const useSelectProjectAuditStatistics = async (type) => {
  if (type == 1) {
    await selectProjectAuditStatistics(BaseDeliverLineParams).then((res) => {
      if (res.code == 0) {
        tableArr.value = res.data;
        xmsjtjqkOption.value = xmsjtjqk(res.data);
      }
    });
  } else {
    xmsjtjqkOption.value = xmsjtjqk(tableArr.value);
  }
};
let getBaseDeliverLineEcharts;
//获取交付折线图数据
const useGetBaseDeliverLine = async (type) => {
  if (type == 1) {
    await getBaseDeliverLine(BaseDeliverLineParams).then((res) => {
      if (res.code == 0) {
        jfpmOption.value = kfsjfpm(res.data);
        getBaseDeliverLineEcharts = res.data;
      }
    });
  } else {
    jfpmOption.value = kfsjfpm(getBaseDeliverLineEcharts);
  }
};
let getBaseLendLineEcharts;
// 借款折线图数据
const useGetBaseLendLine = async (type) => {
  if (type == 1) {
    await getBaseLendLine(BaseDeliverLineParams).then((res) => {
      if (res.code == 0) {
        jkpmOption.value = kfsjkpm(res.data);
        getBaseLendLineEcharts = res.data
      }
    });
  } else {
    jkpmOption.value = kfsjkpm(getBaseLendLineEcharts);
  }
};

// 交付选择时间
const timesJf = (id) => {
  if (id != 4) {
    useGetBaseDeliverLine(1);
    BaseDeliverLineParams.dateTypee = id;
  }
};
// 借款选择实际
const timesjk = (id) => {
  if (id != 4) {
    useGetBaseLendLine(1);
    BaseDeliverLineParams.dateTypef = id;
  }
};
//选择交付趋势时间段
const optTime1 = () => {
  BaseDeliverLineParams.dateTypee = 4;
  BaseDeliverLineParams.startTimee = timeValue1.value[0];
  BaseDeliverLineParams.endTimee = timeValue1.value[1];
  useGetBaseDeliverLine(1);
};

//选择借款趋势时间段
const optTime = () => {
  BaseDeliverLineParams.dateTypef = 4;
  BaseDeliverLineParams.startTimef = timeValue.value[0];
  BaseDeliverLineParams.endTimef = timeValue.value[1];
  useGetBaseLendLine(1);
};
// 获取城市列表
const useSelectPull = async () => {
  await selectPull({ parentCode: 210000 }).then((res) => {
    if (res.code == 0) {
      cityList.value = res.data;
    }
  });
};
// 选择城市
const confirmCity = (id, name) => {
  console.log(id);
  BaseDeliverLineParams.cityCode = id;
  BaseDeliverLineParams.cityName = name;
  console.log(BaseDeliverLineParams);
  selectCityName.value = name;
  cityUn.value = false;
  useGetBaseDeliver();
  useSelectProjectMoneyTree();
  useSelectEnterpriseInfoProjectInfo();
  useSelectProjectResidueSchedule(1);
  useSelectProjectAuditStatistics(1);
  useGetBaseDeliverLine(1);
  useGetBaseLendLine(1);
};
const cityUns = () => {
  cityUn.value = !cityUn.value;
};
const childEvent = (val) => {
  console.log(val);
};
const dialogData = (val) => {
  console.log(val)
  magnifyEchartData.value = val;
}
const closeDialog = (val) => {
    magnifyEchartData.value = null
}
onMounted(() => {
  console.log(proxy.$route.params.groupName);
  useGetBaseDeliver();
  useSelectProjectMoneyTree();
  useSelectEnterpriseInfoProjectInfo();
  useSelectProjectResidueSchedule(1);
  useSelectProjectAuditStatistics(1);
  useGetBaseDeliverLine(1);
  useGetBaseLendLine(1);
  useSelectPull();
});

const someMethod = () => {
  return {
    echartsOption1,
    tableArr,
    xmsjtjqkOption,
    jfpmOption,
    jkpmOption,
    timeValue,
    BaseDeliverLineParams,
    selectCityName,
    cityUn,
  };
};
</script>
<style scoped lang="less">
.two {
  display: grid;
  grid-template-columns: 48% 50%;
  grid-template-rows: 45% 46%;
  grid-gap: 51px 25px !important;
  grid-column-gap: 15px;
}

.home {
  padding-left: 40px;
  grid-gap: 28px 50px;
  grid-template-columns: 861px 858px;
  grid-template-rows: 20px 100px 720px;

  // 隐藏滚动条
  overflow: hidden;

  .top {
    grid-column: 1 / 4;
  }

  .cityList {
    grid-column: 1 / 4;
    position: relative;
    bottom: 10px;
  }

  .wall {
    grid-column: 1 / 4;
    display: flex;
    justify-content: space-around;
    position: relative;
    bottom: 10px;
  }

  .left {}

  .right {
    margin-right: -56px;
  }
}

.hd {
  width: 100%;
  margin-left: 18px;
}

.hd>.list {
  display: flex;
  color: #fff;
  font-size: 14px;
  width: 100%;

  div {
    text-align: center;
    padding: 4px;
    display: flex;
    justify-content: center;
  }

  .zzbOne {
    width: 27%;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 18px;
  }

  .zzbTwo {
    width: 22%;
  }

  .zzbThree {
    width: 20%;
  }
}

.list:nth-child(3) {
  background: rgba(16, 28, 51, 0.9) !important;
}

.spanRadius {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 10px;
}

.list:nth-child(2) .spanRadius {
  background: #417fef;
}

.list:nth-child(3) .spanRadius {
  background: rgba(14, 240, 215, 1);
}

.list:nth-child(4) .spanRadius {
  background: rgba(184, 144, 254, 1);
}

.echartsHeight {
  padding-left: 1px;
}

.message-list {
  width: 235px !important;
}

.ymoney {
  height: 30px;
  position: relative;
  // bottom: 10px;
}

.cityList {
  padding-right: 50px;
  display: flex;
  justify-content: flex-end;
}

.cityListBox {
  border-radius: 5px;
  position: relative;
  bottom: 10px;
  color: #fff;
  font-size: 20px;
  width: 168px;
  height: 37px;
  background: rgba(7, 68, 153, 0.3);
  font-family: PingFang-SC, PingFang-SC;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 22px;
    height: 22px;
    margin-left: 15px;
  }
}
</style>
